

<!-- 礼品卡赠送 -->
<template>
	<view class="container">

		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="礼品卡赠送" colorTheme="black">
			</navHeader>
		</view>
		
		
		<!-- 礼品卡信息 -->
		<view class="cardList-Container">
			<view v-for="(item, index) in cardList" :key="index" class="cardItem">
				
				<view class="cardNumber">
					卡号：{{item.cgcCardNumber}}
				</view>
				
				<view class="cardAmount">
					<text class="money-icon">￥</text><text class="money-text">{{item.cgsAmount / 100}}</text>
				</view>
				
				<image class="cardCover" :class="{usedCover: item.cgcBindingUserId}" :src="imgSite + item.cgImage"></image>
			</view>
		</view>
		

		<!-- 转赠说明 -->
		<view class="shareDesc-Container">
			<view>1.礼品卡只能一个人进行充值。</view>
			<view>2.赠送好友后，好友打开链接会看到礼品卡的密码，请勿公开转发。</view>
			<view>3.礼品卡赠送后，收到礼品卡的好友和您都拥有这张卡的充值权益，但一方充值后，卡片为已使用状态，另一方将无法充值。</view>                         
		</view>


		<!-- 立即赠送 -->
		<view @click="userShareHandler()" class="shareBtn-Container">
			立即赠送
		</view>
		
		
		<!-- 分享 -->
		<uni-popup ref="showpopup" :type="type" style="z-index: 100;">
			<view class="share">
				<view class="title-name flex-all-center">
					<image :src="icon.left"></image>
					分享到
					<image :src="icon.right"></image>
				</view>
				<view class="icons flex-rwo-around">
					
					<view class="icon-block flex-all-center">
						<image :src="icon.weixin" @click="share('0')"></image>
						<text>微信好友</text>
					</view>
					<view class="icon-block flex-all-center">
						<image :src="icon.pengyouquan" @click="share('1')"></image>
						<text>朋友圈</text>
					</view>
					<!--<view class="icon-block flex-all-center">
						<image :src="icon.weibo" @click="share('2')"></image>
						<text>微博</text>
					</view>-->
				</view>
				<view class="cancel" @click="cancel()">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
	    mapState,  
	    mapMutations  
	} from 'vuex';  
	
	import navHeader from '@/components/nav-header/nav-header';
	
	export default {
		components: {
			navHeader
		},
		computed:{
			...mapState(['hasLogin', 'imgSite', 'url']),
		},
		data() {
			return {
				icon: {
					left: "/static/images/detail/left.png",
					right: "/static/images/detail/right.png",
					weixin: "/static/images/detail/wechat.png",
					weibo: "/static/images/detail/weibo.png",
					pengyouquan: "/static/images/detail/pengyouquan.png",
					haibao: "/static/images/detail/haibao.png",
				},
				type: 'bottom',
				cardList: []
			};
		},
		onLoad: function(options) {
			this.cardList = [JSON.parse(options.cardInfo)];
		},
		methods: {
			
			// 推荐人注册
			recommendInfoFilter(callBack) {
				if(!this.hasLogin) {
					uni.navigateTo({
						url: '/pagesUser/login/userLogin'
					});
				}else {
					callBack();
				}
			},
			
			// 弹窗分享
			userShareHandler() {
				
				var that = this;
				that.recommendInfoFilter(function() {
					
					// #ifdef H5 || MP-WEIXIN
					//用户信息
					var customerId = "";
					var nick_name = "";
					const tokenInfo = uni.getStorageSync('tokenInfo');
					if (tokenInfo) {
						customerId = JSON.parse(tokenInfo).customerId;
						nick_name = JSON.parse(tokenInfo).nickName;
					}
					
					uni.setClipboardData({
						data: encodeURI(that.url + "#/pagesAccount/giftCard/shareOpen?shareName="+nick_name+"&cardInfo="+JSON.stringify(that.cardList[0])),
						success: function(data) {
							uni.showToast({
								title: '您的分享链接已复制到您的粘贴板，',
								icon: 'none'
							});
						},
						fail: function(err) {},
						complete: function(res) {}
					});
					// #endif
					
					// #ifdef APP-PLUS
					that.$nextTick(() => {
						that.$refs['showpopup'].open();
					});
					// #endif
				});
			},
			// 关闭分享弹窗
			cancel() {
				this.$refs['showpopup'].close();
			},
			// 分享
			share(e) {
				
				//用户信息
				var customerId = "";
				var nick_name = "";
				const tokenInfo = uni.getStorageSync('tokenInfo');
				if (tokenInfo) {
					customerId = JSON.parse(tokenInfo).customerId;
					nick_name = JSON.parse(tokenInfo).nickName;
				}
				
				let that = this;
				if (e == '0') {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: that.url + "#/pagesAccount/giftCard/shareOpen?shareName="+nick_name+"&cardInfo="+JSON.stringify(that.cardList[0]),
						title: "构购",
						summary: "我赠送您一张构购电商平台礼品卡, 快来查看",
						imageUrl: that.imgSite + '/s/20210125/37jodmjvvwuk.png',
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
			
				} else if (e == '1') {
			
					uni.share({
						provider: "weixin",
						scene: "WXSenceTimeline",
						type: 0,
						href: that.url + "#/pagesAccount/giftCard/shareOpen?shareName="+nick_name+"&cardInfo="+JSON.stringify(that.cardList[0]),
						title: "构购",
						summary: "我赠送您一张构购电商平台礼品卡, 快来查看",
						imageUrl: that.imgSite + '/s/20210125/37jodmjvvwuk.png',
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else if (e == '2') {
			
					uni.share({
						provider: "sinaweibo",
						type: 0,
						href: that.url + "#/pagesAccount/giftCard/shareOpen?shareName="+nick_name+"&cardInfo="+JSON.stringify(that.cardList[0]),
						title: "构购",
						summary: "我赠送您一张构购电商平台礼品卡, 快来查看",
						imageUrl: that.imgSite + '/s/20210125/37jodmjvvwuk.png',
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}
			},
			// 关闭弹窗
			closeModalHandler() {
				this.showCouponModal = false;
				this.showSpecModal = false;
			},
		}
	};
</script>
<style lang="less">
	page{
		background: #F5F5F5;
	}
	
	
	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	
	//礼品卡列表
	.cardList-Container {
		padding-top: 20rpx;
		
		.cardItem {
			position: relative;
			margin: 0 auto;
			margin-bottom: 30rpx;
			width:690rpx;
			height:378rpx;
			background:rgba(255,255,255,1);
			border-radius:16rpx;
			overflow: hidden;
			
			//卡号
			.cardNumber {
				z-index: 99;
				position: absolute;
				top: 40rpx;
				left: 30rpx;
				font-size:22rpx;
				font-family:PingFang SC;
				// font-weight:500;
				color:rgba(255,255,255,1);
				text-shadow:0px 1px 2px rgba(0, 0, 0, 0.78);
			}
			
			//金额
			.cardAmount {
				z-index: 99;
				position: absolute;
				right: 0;
				top: 295rpx;
				padding-left: 20rpx;
				width:146rpx;
				height:56rpx;
				line-height: 56rpx;
				font-size:24rpx;
				font-family:PingFang SC;
				color:rgba(255,255,255,1);
				text-shadow:0px 2px 3px rgba(119,119,119,1);
				background:rgba(0,0,0,0.5);
				border-radius:8rpx 0px 0px 8rpx;
				
				.money-icon {
					font-size: 24rpx;
				}
				.money-text {
					font-size: 40rpx;
				}
			}
			
			.cardCover {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 378rpx;
				
				&.usedCover {
					background:rgba(0,0,0,0.3);
				}
			}
		}
	}
	
	/* 转赠说明 */
	.shareDesc-Container {
	    margin: 0 auto;
	    margin-top: 36rpx;
	    width: 675rpx;
	    line-height: 42rpx;
	    font-size:26rpx;
	    font-family:Microsoft YaHei;
	    font-weight:400;
	    color: #333333;
	}
	
	
	/* 立即转赠 */
	.shareBtn-Container {
		margin: 0 auto;
		margin-top: 184rpx;
	    width:400rpx;
	    height:90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size:30rpx;
		font-family:PingFang SC;
		// font-weight:500;
		color:rgba(255,255,255,1);
	    background:linear-gradient(90deg,rgba(223,19,37,1) 0%,rgba(207,0,181,1) 100%);
	    border-radius:45rpx;
	}
	
	
	// 分享
	.share {
		width: 100%;
		height: 486rpx;
		border-radius: 16rpx 16rpx 0 0;
		background-color: white;
		z-index: 1000;
		position: relative;
	
		.title-name {
			height: 126rpx;
			width: 100%;
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
		}
	
		image {
			width: 168rpx;
			height: 16rpx;
			margin: 0 35rpx 0 35rpx;
		}
	
		.icons {
			width: 690rpx;
			margin: 24rpx auto 0 auto;
			border-bottom: 1rpx solid#eee;
			padding-bottom: 74rpx;
	
			.icon-block {
				width: 120rpx;
				font-size: 26rpx;
				color: #333333;
				flex-wrap: wrap;
	
				image {
					flex-shrink: 0;
					width: 110rpx;
					height: 110rpx;
				}
	
				text {
					margin-top: 24rpx;
				}
			}
		}
	
		.cancel {
			color: #999999;
			font-size: 30rpx;
			margin-top: 27rpx;
			width: 100%;
			text-align: center;
		}
	}
</style>



